<!-- 
    分页组件
使用了父传子，子传父传递
自定义事件：handlePage ， handleLimit

父亲传递过来的值：total
 -->
<template>
    <div class="main-pagination">
        <el-pagination v-model:currentPage="_page" v-model:page-size="_limit"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100, 200]" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="total"/>
            <!-- 回到顶部组件 -->
        <div class="backtop">
            <!-- 会出现过度动画的组件 -->
            <Transition name="back">
                <el-backtop v-show="back" :right="100" :bottom="100" target=".el-main" ref="refBacktop" :visibility-height='0'/>    
            </Transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref,watch ,nextTick,computed,onMounted } from 'vue'

// 父传子，子接收
let prop = defineProps({
    page:{type:Number,required:true},
    limit:{type:Number,required:true},
    total:{type:Number,required:true}
})
const _page = ref(prop.page)
const _limit = ref(prop.limit)
const _total = ref(prop.total)
//  获取回到顶部的实例
const pageMax = computed(()=>Math.ceil(prop.total / _limit.value))

const refBacktop = ref()
let back = ref(false)
let elMain: ElementAddEvent
// 挂载后
onMounted(() => {
    elMain = document.getElementsByClassName('el-main')[0]
    // 动态注册事件
    elMain.onscroll = function () {
        //滚动距离大于60 显示   小于则隐藏
        back.value = this.scrollTop > 60
    }
})

// 子传父，运用非TS语法，使用js的语法来写，目前很稳定
let emit = defineEmits<{(e : "handlePagination" , pageSizes : Object):void}>()
// 分页数据
const background = ref(true)    //分页背景
watch([_page,_limit],()=>{
    // 防止请求两次
    if (_page.value > pageMax.value) { return }
    emit('handlePagination',{page:_page.value,limit:_limit.value})
    nextTick(() => {//回到顶部
        refBacktop.value.$el.click?.()//vm.$el获取Vue实例关联的DOM元素,点击触发其他DOM元素
    })
})
</script>